<template>
  <div class="update-name">
     <van-nav-bar 
      title="设置昵称"
      left-text="取消"
      right-text="完成"
      @click-left="$emit('close')"
      @click-right="updateUserProfile"
    >
    </van-nav-bar>

    <div class="field-warp">
      <van-field
      v-model.trim="message"
      rows="1"
      autosize
      type="textarea"
      maxlength="11"
      placeholder="请输入昵称"
      show-word-limit
    />
    </div>
  </div>
</template>
<script>
import {updateUserProfileAPI} from '@/api';

export default {
  name:"UpdateName",
  components:{},
  props:{
    value:{
      type:String,
      required:true
    }
  },
  data(){
    return {
      message:this.value
    }
  },
  computed:{},
  watch:{},
  methods:{
    async updateUserProfile(){
      this.$toast.loading({
        message:'保存中...',
        forbidClick:true,
        duration:0
      })
      try{
        if(!this.message.length){
          this.$toast.fail('昵称不能为空!')
          return
        } 
        await updateUserProfileAPI({
          name:this.message
        })
        this.$emit('input',this.message)
        this.$emit('close')
        this.$toast.success('更新成功')
      }catch(err){
        this.$toast.fail('更新失败')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.update-name{
  .field-warp{
    padding: 15px;
  }
}
</style>